
<!--客户列表-->
<!--包含属性：客户编号cno、客户姓名name、客户性别sex、客户年龄age、客户联系方式tel、
客户到访次数times、客户重要程度level、喜好preference、购买状态state -->

<template>
  <div class="container">
    <el-card>
      <el-table
        :data="staffList"
        stripe
        class="table">
        <el-table-column
          prop="sno"
          label="编号">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名">
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="联系方式">
        </el-table-column>
        <el-table-column
          prop="position"
          label="职位">
        </el-table-column>
        <el-table-column
          prop="leader"
          label="领导">
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button @click="handleModifyDialog(scope.row)">修改信息</el-button>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot-scope="scope">
            <el-button type="danger" @click="fire(scope.row.sno)">删除员工</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
        <el-dialog
          title="修改员工信息"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
          <div>
            <el-form :model="modifyStaff" label-position="left" label-width="30%">
              <el-form-item label="员工编号">
                <el-input v-model="modifyStaff.sno" style="width: 90%" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="姓名">
                <el-input v-model="modifyStaff.name" style="width: 90%"></el-input>
              </el-form-item>
              <el-form-item label="性别">
                <el-radio v-model="modifyStaff.sex" label="m">男</el-radio>
                <el-radio v-model="modifyStaff.sex" label="f">女</el-radio>
              </el-form-item>
              <el-form-item label="年龄">
                <el-input-number v-model="modifyStaff.age" style="width: 60%"></el-input-number>
              </el-form-item>
              <el-form-item label="联系电话">
                <el-input v-model="modifyStaff.tel" style="width: 90%"></el-input>
              </el-form-item>
              <el-form-item label="职位">
                <el-select v-model="modifyStaff.position">
                  <el-option label="销售员工" value="销售员工"></el-option>
                  <el-option label="销售经理" value="销售经理"></el-option>
                  <el-option label="实习生" value="实习生"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="直属领导">
                <el-input v-model="modifyStaff.leader"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modify">确 定</el-button>
      </span>
        </el-dialog>
  </div>
</template>

<script>
  export default {
    name: "StaffTable",
    props:{
      staffList:[],
    },
    data() {
      return {
        dialogVisible:false,
        /*修改用*/
        modifyStaff:{
          sno:'',
          name:'',
          sex:'f',
          age:'',
          tel:'',
          position:'',
          leader:'',
        }
      }
    },
    async mounted() {
    },
    methods:{

      handleModifyDialog(param){
        this.modifyStaff=param;
        this.dialogVisible=true;

      },
      handleClose(){
        this.dialogVisible=false;
      },
      async modify(){
        this.$confirm('是否要保存修改的员工信息？','修改',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(() => {
          let mydata=this.modifyStaff;
          console.log(mydata);
          this.$axios.post('/modify_staff',mydata).then((res) => {
            if(res.data==='1'){
              this.$emit("modifyed");
              this.$message({
                type: 'success',
                message: '信息修改成功!'
              });
            }else {
              this.$message({
                type: 'error',
                message: '信息修改失败!'
              });
            }
            this.$emit("modifyed");
            this.handleClose();
          })
        });
      },
      async fire(param){
        this.$confirm('此操作将永久删除该员工, 是否继续?', '提示',{
          confirmButtonText:'确定',
          cancelButtonText:'取消',
          type:'warning'
        }).then(() => {
          let mydata={
            deleteName:param
          }
          console.log(mydata);
          this.$axios.post('/delete_staff',mydata).then((res) => {
            if(res.data==='1'){
              this.$emit("modifyed");
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
            }else {
              this.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    }
  }
</script>

<style scoped>
  .table{
    width:100%;
    height:770px;
    overflow-y: scroll;
  }
</style>
